import React, { useEffect, useState } from 'react';
import { ProCard, StatisticCard, PageContainer } from '@ant-design/pro-components';
import { Row, Col, Table, Progress, Tag, Avatar, List } from 'antd';
import {
  UserOutlined,
  CreditCardOutlined,
  TagsOutlined,
  EyeOutlined,
  ArrowUpOutlined,
  ArrowDownOutlined,
  TrophyOutlined,
  ClockCircleOutlined,
  DeleteOutlined,
} from '@ant-design/icons';
import { useAuthStore } from '@/stores/auth';

const { Statistic } = StatisticCard;

const Dashboard: React.FC = () => {
  const { user } = useAuthStore();
  const [loading, setLoading] = useState(true);
  const [stats, setStats] = useState({
    totalUsers: 0,
    totalCards: 0,
    totalTopics: 0,
    totalViews: 0,
    todayUsers: 0,
    todayCards: 0,
    userGrowth: 0,
    cardGrowth: 0,
  });

  // 模拟数据加载
  useEffect(() => {
    const timer = setTimeout(() => {
      setStats({
        totalUsers: 1234,
        totalCards: 567,
        totalTopics: 89,
        totalViews: 12345,
        todayUsers: 23,
        todayCards: 8,
        userGrowth: 12.5,
        cardGrowth: 8.3,
      });
      setLoading(false);
    }, 1000);

    return () => clearTimeout(timer);
  }, []);

  // 最近活动数据
  const recentActivities = [
    {
      id: '1',
      title: '新增卡片 "Apple - 苹果"',
      description: '在水果类主题下新增了一张卡片',
      avatar: <CreditCardOutlined style={{ color: '#52c41a' }} />,
      time: '2小时前',
    },
    {
      id: '2',
      title: '编辑主题 "水果类"',
      description: '更新了主题的描述信息',
      avatar: <TagsOutlined style={{ color: '#1890ff' }} />,
      time: '4小时前',
    },
    {
      id: '3',
      title: '用户注册',
      description: '新用户 user123 完成注册',
      avatar: <UserOutlined style={{ color: '#722ed1' }} />,
      time: '6小时前',
    },
    {
      id: '4',
      title: '删除卡片',
      description: '删除了过期的卡片内容',
      avatar: <DeleteOutlined style={{ color: '#ff4d4f' }} />,
      time: '8小时前',
    },
  ];



  // 热门主题数据
  const popularTopics = [
    { name: '水果', progress: 85, count: 45 },
    { name: '动物', progress: 72, count: 38 },
    { name: '颜色', progress: 68, count: 32 },
    { name: '数字', progress: 55, count: 28 },
    { name: '形状', progress: 42, count: 21 },
  ];

  return (
    <PageContainer
      header={{
        title: `欢迎回来，${user?.name || user?.account}！`,
        subTitle: '这里是您的工作台概览',
        breadcrumb: {
          items: [
            { title: '首页' },
            { title: '仪表盘' },
          ],
        },
      }}
    >
      {/* 统计卡片 */}
      <ProCard
        title="数据概览"
        extra="今日数据"
        split="vertical"
        headerBordered
        bordered
        style={{ marginBottom: 16 }}
      >
        <ProCard split="horizontal">
          <ProCard split="vertical">
            <StatisticCard
              statistic={{
                title: '总用户数',
                value: stats.totalUsers,
                icon: <UserOutlined style={{ color: '#1890ff' }} />,
                description: (
                  <Statistic
                    title="今日新增"
                    value={stats.todayUsers}
                    trend="up"
                    suffix={<ArrowUpOutlined style={{ color: '#52c41a' }} />}
                    valueStyle={{ fontSize: 12 }}
                  />
                ),
              }}
              loading={loading}
            />
            <StatisticCard
              statistic={{
                title: '总卡片数',
                value: stats.totalCards,
                icon: <CreditCardOutlined style={{ color: '#52c41a' }} />,
                description: (
                  <Statistic
                    title="今日新增"
                    value={stats.todayCards}
                    trend="up"
                    suffix={<ArrowUpOutlined style={{ color: '#52c41a' }} />}
                    valueStyle={{ fontSize: 12 }}
                  />
                ),
              }}
              loading={loading}
            />
          </ProCard>
          <ProCard split="vertical">
            <StatisticCard
              statistic={{
                title: '主题数量',
                value: stats.totalTopics,
                icon: <TagsOutlined style={{ color: '#722ed1' }} />,
                description: (
                  <Statistic
                    title="增长率"
                    value={stats.userGrowth}
                    precision={1}
                    suffix="%"
                    trend="up"
                    valueStyle={{ fontSize: 12 }}
                  />
                ),
              }}
              loading={loading}
            />
            <StatisticCard
              statistic={{
                title: '总浏览量',
                value: stats.totalViews,
                icon: <EyeOutlined style={{ color: '#fa8c16' }} />,
                description: (
                  <Statistic
                    title="增长率"
                    value={stats.cardGrowth}
                    precision={1}
                    suffix="%"
                    trend="up"
                    valueStyle={{ fontSize: 12 }}
                  />
                ),
              }}
              loading={loading}
            />
          </ProCard>
        </ProCard>
      </ProCard>

      <ProCard split="vertical" gutter={16}>
        {/* 最近活动 */}
        <ProCard
          title="最近活动"
          extra={<ClockCircleOutlined />}
          colSpan="60%"
          headerBordered
        >
          <List
            itemLayout="horizontal"
            dataSource={recentActivities}
            renderItem={(item) => (
              <List.Item>
                <List.Item.Meta
                  avatar={<Avatar icon={item.avatar} />}
                  title={item.title}
                  description={item.description}
                />
                <div style={{ color: '#999', fontSize: 12 }}>{item.time}</div>
              </List.Item>
            )}
          />
        </ProCard>

        {/* 热门主题 */}
        <ProCard
          title="热门主题"
          extra={<TrophyOutlined />}
          colSpan="40%"
          headerBordered
        >
          <div style={{ padding: '8px 0' }}>
            {popularTopics.map((topic, index) => (
              <div key={topic.name} style={{ marginBottom: 20 }}>
                <div style={{
                  display: 'flex',
                  justifyContent: 'space-between',
                  alignItems: 'center',
                  marginBottom: 8
                }}>
                  <span style={{ fontWeight: 500 }}>{topic.name}</span>
                  <Tag color="blue">{topic.count} 张</Tag>
                </div>
                <Progress
                  percent={topic.progress}
                  size="small"
                  strokeColor={{
                    '0%': '#1890ff',
                    '100%': '#52c41a',
                  }}
                  format={(percent) => `${percent}%`}
                />
              </div>
            ))}
          </div>
        </ProCard>
      </ProCard>
    </PageContainer>
  );
};

export default Dashboard;